<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>开屏广告编辑</title>
<#include "/WEB-INF/content/module-edit.html">
<script type="text/javascript">
var areaTree=[
	<#list map.areaTree as item>
		{"id":"${item.id}","text":"${item.text}","children":[
			<#list item.children as ite>
				{"id":"${ite.id}","text":"${ite.text}","children":[
					<#list ite.children as it>
						{"id":"${it.id}","text":"${it.text}","children":[
             				<#list it.children as i>
           						{"id":"${i.id}","text":"${i.text}"}<#if i_has_next>,</#if>
           					</#list>						                                                 
						]}<#if it_has_next>,</#if>
					</#list>
				]}<#if ite_has_next>,</#if>
			</#list>
		]}<#if item_has_next>,</#if>
	</#list>
];
var sysStatus = [
    {"id":"0","text":"正常"},
    {"id":"1","text":"禁用"}
];
var oper=[
	{"id":"0","text":"android"},
	{"id":"1","text":"ios"},
	{"id":"2","text":"所有"}
];
var maxPlace=<#if map.adArea??>${map.adArea?size}<#else>0</#if>;
$(function() {
  	$("#status").combobox({
  		valueField : 'id',
  		textField : 'text',
  		editable:false,
  		data:sysStatus
  	}); 
  	$("#os").combobox({
  		valueField : 'id',
  		textField : 'text',
  		editable:false,
  		data:oper
  	});
  	$("#aid1").combobox({
  		valueField : 'id',
  		textField : 'text',
  		editable:false,
        panelHeight:'auto',
  		data:areaTree,
  		onChange:function(data){
			$("#s2").css("display","none");
			$("#s3").css("display","none");
			$("#s4").css("display","none");
			$("#aid2").combobox('setValue',"");
  			for(var i in areaTree){
  				if(areaTree[i].id==data){
  					var tree=areaTree[i].children;
  					if(tree.length>0){
  	  					$("#aid2").combobox('loadData',tree);
  	  					$("#s2").css("display","block");
  					}
  				}
  			}
  		}
  	});	
	$("#aid2").combobox({
	  		valueField : 'id',
	  		textField : 'text',
	  		editable:false,
	        panelHeight:'auto',
	        onChange:function(data){
				$("#s3").css("display","none");
 				$("#s4").css("display","none");
 				$("#aid3").combobox('setValue',"");
	        	var datas=$("#aid2").combobox("getData");
	  			for(var i in datas){
	  				if(datas[i].id==data){
	  					var tree=datas[i].children;
	  					if(tree.length>0){
	  	  					$("#aid3").combobox('loadData',tree);
	  	  					$("#s3").css("display","block");
	  					}
	  				}
	  			}
	        }
		});  	
	$("#aid3").combobox({
  		valueField : 'id',
  		textField : 'text',
  		editable:false,
        panelHeight:'auto',
        onChange:function(data){
        	$("#s4").css("display","none");
        	$("#aid4").combobox('setValue',"");
        	var datas=$("#aid3").combobox("getData");
  			for(var i in datas){
  				if(datas[i].id==data){
  					var tree=datas[i].children;
  					if(tree.length>0){
  	  					$("#aid4").combobox('loadData',tree);
  	  					$("#s4").css("display","block");
  					}
  				}
  			}
        }
	});  
	$("#aid4").combobox({
  		valueField : 'id',
  		textField : 'text',
  		editable:false,
        panelHeight:'auto',
	});  
  	$('#seq').numberspinner({  editable:false ,min:1,increment:1 });
 });
 
 function plus(){
	 var aid1=$("#aid1").combobox("getValue");
	 var aid2=$("#aid2").combobox("getValue");
	 var aid3=$("#aid3").combobox("getValue");
	 var aid4=$("#aid4").combobox("getValue");
	 var aid="";
	 var text="";
	 if(aid4.length>0){
		 aid=aid4;
		 text=$("#aid4").combobox("getText");
	 }else
		 if(aid3.length>0){
			 aid=aid3;
			 text=$("#aid3").combobox("getText");
		 }else
			 if(aid2.length>0){
				 aid=aid2;
				 text=$("#aid2").combobox("getText");
			 }else
				 if(aid1.length>0){
					 aid=aid1;
					 text=$("#aid1").combobox("getText");
	 			 }else{
					 top.showMsg("请选择区域");
					 return;
				 }
	 
	 for(var i=0;i<maxPlace;i++){
		 var placeid=$("#a"+(i+1)).attr("placeid");
		 if(placeid==aid){
			 top.showMsg("该区域已投放");
			 return;
		 }
	 }
	 
	 var html=$("#model").html();
	 maxPlace++;
	 html=html.replace('id="ppp"','id="a'+maxPlace+'"');
	 html=html.replace('placeid','placeid="'+aid+'"');
	 html=html.replace("<span></span>","<span>"+text+"</span>");
	 html=html.replace('mis()','mis('+maxPlace+')');
	 $("#apd").append(html);
 }
 
 function mis(i){
	 $("#a"+i).remove();
 }
 
 function mySave() {
		if (!$("#form").form('validate'))
			return;
		var baseUrl = moduleUrl.substring(0, moduleUrl.lastIndexOf("/"));
		var url = "";
		if ($("#_id").val() == "") {
			url = "create";
		} else {
			baseUrl = baseUrl.substring(0, baseUrl.lastIndexOf("/"));
			url = "../update";
		}
		var places="";
		for(var i=1;i<=maxPlace;i++){
			 var placeid=$("#a"+i).attr("placeid");
			 if(placeid){
				 places=places+placeid;
			 }
			 if(i!=maxPlace&&placeid){
				 places=places+"<>";
			 }
		}
		$("#places").val(places);
		$("#form").ajaxSubmit({
			url : url,
			success : function(data) {
				var msg = "操作失败";
				if (data.state) {
					if (data.info)
						msg = data.info;
					else
						msg = "操作成功";
					top.showMsg(msg);
					top.reloadModule(parentModuleId);
					top.closeModule(moduleName, parentModuleName);
				} else {
					if (data.info)
						msg = data.info;
					top.showMsg(msg);
				}
			}
		});
	}
</script>
<style>
.input-width{
	width: 95%;
}
</style>
 
</head>
<body class="easyui-layout">
	<div region="north" id="toolbar" style="background-color: #eee; padding: 5px; overflow: hidden;" border="false">
		<#if object.adid?exists&&object.adid!="">
			<@auth code="ad:screen:update">
				<a href="javascript:void(0);" class="easyui-linkbutton" plain="true" iconCls="icon-add" style="border: 1px solid #ccc" onclick="javascript:mySave()">保存</a>
			</@auth>
		<#else>
			<@auth code="ad:screen:create">
				<a href="javascript:void(0);" class="easyui-linkbutton" plain="true" iconCls="icon-add" style="border: 1px solid #ccc" onclick="javascript:mySave()">保存</a>
			</@auth>
		</#if>
		<a href="javascript:void(0);" class="easyui-linkbutton" plain="true" iconCls="icon-edit" style="border: 1px solid #ccc" onclick="javascript:cancel()">关闭</a>
	</div>
	<div region="center">
		<div id="p" class="easyui-panel" style="background: #fafafa; padding: 10px" fit="true" toolbar="#toolbar">
			<form id="form" method="post">
				<input type="hidden" id="places" name="places"/>
				<table class="form" cellspacing="0" style="width: 100%">
					<tbody id="apd" style="border: 1px solid #ccc">
						<tr style="display: none;">
							<td colspan="6"><input id="_id" name="adid" value="${(object.adid)!}"></td>
						</tr>
						<tr>
							<td class="label">开始时间：</td>
							<td>
								<input id="beigintime" name="begintime" class="easyui-datetimebox" required="true" value="${(object.begintime)!}"/>
							</td>
							<td class="validate">*</td>
							<td class="label">结束时间：</td>
							<td>
								<input id="endtime" name="endtime" class="easyui-datetimebox" required="true" value="${(object.endtime)!}"/>
							</td>
							<td class="validate">*</td>
						</tr>
						<tr>
							<td class="label">状态：</td>
							<td><input id="status" name="status" required="true" value="${object.status!'0'}" /></td>
							<td class="validate"></td>
							<td class="label">排序：</td>
							<td><input id="seq" name="seq" required="true" value="${object.seq!1}" /></td>
							<td class="validate"></td>								
						</tr>
						<#list map.adArea as item>
							<tr id="a${item_index+1}" placeid="${item.aid}">
								<td class="label">投放区域：</td>
								<td><span>${item.name}</span></td>
								<td class="validate"><a class="easyui-linkbutton" iconCls="icon-remove" href="javascript:mis(${item_index+1});">删除</a></td>
							</tr>
						</#list>
					</tbody>
				</table>
				<table style="display:none;">
					<tbody id="model">
						<tr id="ppp" placeid>
							<td class="label">投放区域：</td>
							<td><span></span></td>
							<td class="validate"><a class="easyui-linkbutton" iconCls="icon-remove" href="javascript:mis();">删除</a></td>
						</tr>
					</tbody>
				</table>
				<div style="margin-left:20%;float:left;">
					<span id="s1" style="float:left;margin-top:2rem;"><input id="aid1" /></span>
					<span id="s2" style="display:none;float:left;margin-top:2rem;"><input id="aid2"/></span>
					<span id="s3" style="display:none;float:left;margin-top:2rem;"><input id="aid3"/></span>
					<span id="s4" style="display:none;float:left;margin-top:2rem;"><input id="aid4"/></span>
					<a class="easyui-linkbutton" style="margin:2rem;" iconCls="icon-add" href="javascript:plus()">添加区域</a>
				</div>
			</form>
		</div>
	</div>
</body>
</html>